<template>
  <div>
    <!--工具栏-->
    <div class="crud-group">
      <!-- 搜索 -->
      <el-input
        v-model="searchForm.syncRuleName"
        placeholder="同步规则名称"
        clearable
      />
      <el-input
        v-model="searchForm.sourceName"
        placeholder="所属源名称"
        clearable
      />
      <el-select
        v-model="searchForm.syncMode"
        placeholder="同步方式"
        clearable
      >
        <el-option
          label="时间窗口同步"
          value="时间窗口同步"
        />
        <el-option
          label="源标识同步"
          value="源标识同步"
        />

      </el-select>
      <el-select
        v-model="searchForm.isPart"
        clearable
        placeholder="是否分区"
      >
        <el-option
          v-for="item in partOptions"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-select
        v-model="searchForm.isTimePart"
        clearable
        placeholder="有无时间分区"
      >
        <el-option
          v-for="item in timePartOptions"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <div style="display: flex;">
        <el-button
          class="filter-item"
          type="success"
          icon="el-icon-search"
          @click="search"
        >搜索</el-button>
        <el-button
          class="filter-item"
          type="warning"
          icon="el-icon-refresh-left"
          @click="reset"
        >重置</el-button>
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-plus"
          @click="addClick"
        >新增</el-button>
      </div>
    </div>
    <!--表格渲染-->
    <el-table
      v-loading="loading"
      :data="clusterList"
      border
    >
      <el-table-column
        prop="syncRuleName"
        label="同步规则名称"
        min-width="300px"
        show-overflow-tooltip
      />
      <el-table-column
        prop="sourceName"
        label="所属源名称"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{ scope.row.sourceName ? scope.row.sourceName : '无源' }}</span>
        </template></el-table-column>
      <el-table-column
        prop="isPart"
        show-overflow-tooltip
      >
        <template slot="header">
          <el-tooltip
            class="item"
            effect="dark"
            content="特殊分区当前规则为有分区,分区不包含源分区,特殊表,全量同步"
            placement="top-start"
          >
            <div style="display: flex; align-items: center; gap:2px">
              <span>是否分区</span>
              <i class="el-icon-info" />
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="isTimePart"
        label="有无时间分区分区"
        show-overflow-tooltip
        min-width="150px"
      />
      <el-table-column
        label="同步范围"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span v-if="scope.row.syncRange == 0">全量</span>
          <span v-else>{{ scope.row.syncRange }} 天</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="syncMode"
        label="同步方式"
        show-overflow-tooltip
      />
      <el-table-column
        label="操作"
        width="100px"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="editClick(scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="text"
            @click="deleteClick(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <!--分页组件-->
      <el-pagination
        :current-page="searchForm.current"
        :page-size="searchForm.size"
        layout="prev, pager, next,sizes,total"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 编辑表单 -->

    <el-dialog
      center
      :close-on-click-modal="false"
      :before-close="closeEdit"
      :visible.sync="openEdit"
      :title="title"
      width="65rem"
      append-to-body
    >
      <el-form
        ref="jqForm"
        :inline="true"
        label-width="180px"
        :rules="rules"
        :model="jqForm"
      >
        <el-form-item
          label="同步规则名称"
          prop="syncRuleName"
        >
          <el-input
            v-model="jqForm.syncRuleName"
            style="width: 280px"
            placeholder="当前规则的名称 "
          />
        </el-form-item>
        <el-form-item
          label="是否分区"
          prop="isPart"
        >
          <el-select
            v-model="jqForm.isPart"
            placeholder="请选择"
            style="width: 280px"
          >
            <el-option
              v-for="val in isPartList"
              :key="val"
              :label="val"
              :value="val"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="有无时间分区"
          prop="isTimePart"
        >
          <el-select
            v-model="jqForm.isTimePart"
            placeholder="请选择"
            style="width: 280px"
          >
            <el-option
              v-for="val in isTimePartList"
              :key="val"
              :label="val"
              :value="val"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="所属源名称"
          prop="sourceName"
        >
          <el-input
            :value="jqForm.sourceName"
            placeholder="当前规则过滤数据源"
            style="width: 280px"
            @input="jqForm.sourceName = $event.toUpperCase()"
          />
        </el-form-item>
        <el-form-item
          label="库名白名单"
          prop="baseNameWhite"
        >
          <el-input
            v-model="jqForm.baseNameWhite"
            type="textarea"
            placeholder="当前规则匹配的库名，例如：stg,ods,dw"
            style="width: 280px"
          />
        </el-form-item>
        <el-form-item
          label="库名黑名单"
          prop="baseNameBlack"
        >
          <el-input
            v-model="jqForm.baseNameBlack"
            type="textarea"
            placeholder="当前规则不匹配的库名，例如：%tinf\_%,%\_ext"
            style="width: 280px"
          />
        </el-form-item>
        <el-form-item
          label="表名白名单"
          prop="tableNameWhite"
        >
          <el-input
            v-model="jqForm.tableNameWhite"
            type="textarea"
            placeholder="当前规则匹配的表名，例如：stg,ods,dw"
            style="width: 280px"
          />
        </el-form-item>
        <el-form-item
          label="表名黑名单"
          prop="tableNameBlack"
        >
          <el-input
            v-model="jqForm.tableNameBlack"
            type="textarea"
            placeholder="当前规则不匹配的表名，例如：%tinf\_%,%\_ext"
            style="width: 280px"
          />
        </el-form-item>
        <el-form-item
          label="分区白名单"
          prop="partNameWhite"
        >
          <el-input
            v-model="jqForm.partNameWhite"
            type="textarea"
            placeholder="分区名称匹配的时间分区名，例如：bus_date"
            style="width: 280px"
          />
        </el-form-item>
        <el-form-item
          label="分区黑名单"
          prop="partNameBlack"
        >
          <el-input
            v-model="jqForm.partNameBlack"
            type="textarea"
            placeholder="分区名称不匹配的时间分区名，例如：bus_date"
            style="width: 280px"
          />
        </el-form-item>
        <el-form-item
          label="分区值白名单"
          prop="partValueWhite"
        >
          <el-input
            v-model="jqForm.partValueWhite"
            type="textarea"
            placeholder="分区名称匹配的源分区名，例如：vc_ocurrdate"
            style="width: 280px"
          />
        </el-form-item>
        <el-form-item
          label="分区值黑名单"
          prop="partValueBlack"
        >
          <el-input
            v-model="jqForm.partValueBlack"
            type="textarea"
            placeholder="分区名称不匹配的源分区名，例如：vc_ocurrdate"
            style="width: 280px"
          />
        </el-form-item>
        <el-form-item
          label="同步范围"
          prop="syncRange"
        >
          <el-input-number
            v-model="jqForm.syncRange"
            type
            :min="0"
            :step="1"
            step-strictly
            style="width: 260px"
          />
          <el-tooltip
            style="margin-left: 10px"
            class="item"
            effect="dark"
            content="单位为天,0天为全量"
            placement="top"
          >
            <i
              class="el-icon-warning-outline"
            />
          </el-tooltip>

        </el-form-item>
        <el-form-item
          label="同步方式"
          prop="syncMode"
        >
          <el-select
            v-model="jqForm.syncMode"
            placeholder="请选择"
            style="width: 280px"
          >
            <el-option
              v-for="val in syncModeList"
              :key="val"
              :label="val"
              :value="val"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item
          label="是否默认规则"
          prop="isDefaultRule"
        >
          <el-select
            v-model="jqForm.isDefaultRule"
            placeholder="请选择"
            style="width: 280px"
          >
            <el-option
              v-for="val in isDefaultRuleList"
              :key="val"
              :label="val"
              :value="val"
            />
          </el-select>
        </el-form-item> -->
      </el-form>

      <template #footer>
        <div>
          <el-button
            type="primary"
            plain
            @click="closeEdit"
          >取消</el-button>
          <el-button
            type="primary"
            @click="submit"
          >确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import syncRulesApi from '@/api/dashboard/tabs/addSyncRules'
import { MessageBox } from 'element-ui'

export default {
  name: 'DataDesensitizationRules',
  data() {
    return {
      total: 0,
      partOptions: [
        '分区', '非分区', '特殊分区'
      ],
      timePartOptions: [
        '有时间分区', '无时间分区', '特殊表含时间分区'
      ],
      searchForm: {
        size: 10,
        current: 1,
        syncRuleName: '',
        sourceName: '',
        syncMode: '',
        isPart: '',
        isTimePart: ''
      },
      jqForm: {},
      clusterList: [],
      openEdit: false,
      title: '',
      isPartList: ['分区', '非分区', '特殊分区'],
      isTimePartList: ['有时间分区', '无时间分区', '特殊表含时间分区'],
      syncModeList: ['时间窗口同步', '源标识同步'],
      isDefaultRuleList: ['是', '否'],
      loading: false,
      rules: {
        isPart: [
          { required: true, message: '请选择是否分区', trigger: 'change' }
        ],
        syncRuleName: [
          { required: true, message: '请输入同步规则名称', trigger: 'blur' }
        ],
        isTimePart: [
          { required: true, message: '请选择有无时间分区', trigger: 'blur' }
        ],
        baseNameWhite: [
          { required: true, message: '请输入库名白规则', trigger: 'blur' }
        ],
        syncRange: [
          { required: true, message: '请输入同步范围,单位为天,0天为全量', trigger: 'blur' }
        ],
        syncMode: [
          { required: true, message: '请选择同步方式', trigger: 'change' }
        ]
        // isDefaultRule: [
        //   { required: true, message: '请选择是否默认规则', trigger: 'change' }
        // ]
      }
    }
  },
  created() {
    this.getSyncRules()
  },
  methods: {
    getSyncRules(resetPage = true) {
      if (resetPage) {
        this.searchForm.current = 1
      }
      this.loading = true
      syncRulesApi.getSyncRules(this.searchForm)
        .then((data) => {
          this.total = data.total
          this.clusterList = data.records
        })
        .finally(() => {
          this.loading = false
        })
    },
    search() {
      this.getSyncRules()
    },
    reset() {
      this.searchForm = {
        size: 10,
        current: 1,
        syncRuleName: '',
        syncMode: '',
        isPart: '',
        isTimePart: ''
      }
      this.getSyncRules()
    },
    // 分页
    handleSizeChange(val) {
      this.searchForm.current = 1
      this.searchForm.size = val
      this.getSyncRules()
    },
    // 分页
    handleCurrentChange(val) {
      this.searchForm.current = val
      this.getSyncRules(false)
    },
    editClick(row) {
      this.title = '编辑'
      this.jqForm = {
        id: row.id,
        syncRuleName: row.syncRuleName,
        isPart: row.isPart,
        isTimePart: row.isTimePart,
        sourceName: row.sourceName,
        baseNameWhite: row.baseNameWhite,
        baseNameBlack: row.baseNameBlack,
        tableNameWhite: row.tableNameWhite,
        tableNameBlack: row.tableNameBlack,
        partNameWhite: row.partNameWhite,
        partNameBlack: row.partNameBlack,
        partValueWhite: row.partValueWhite,
        partValueBlack: row.partValueBlack,
        syncMode: row.syncMode,
        syncRange: row.syncRange,
        isDefaultRule: row.isDefaultRule
      }
      this.openEdit = true
    },
    closeEdit() {
      this.openEdit = false
      this.$refs['jqForm'].resetFields()
      this.jqForm = {}
    },
    deleteClick(row) {
      MessageBox.confirm('此操作将永久删除该规则, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var data = {
          id: row.id,
          del: 1
        }
        syncRulesApi.del(data).then((data) => {
          this.getSyncRules()
        })
      }).catch(() => {
        return
      })
    },
    submit() {
      this.$refs['jqForm'].validate((valid) => {
        if (valid) {
          if (this.title === '编辑') {
            syncRulesApi.edit(this.jqForm).then((data) => {
              this.getSyncRules()
              this.openEdit = false
            })
          } else {
            syncRulesApi.add(this.jqForm).then((data) => {
              this.getSyncRules()
              this.openEdit = false
              this.jqForm = {}
            })
          }
        } else {
          return false
        }
      })
    },

    addClick() {
      this.jqForm = {
        syncRuleName: '',
        isPart: '分区',
        isTimePart: '无时间分区',
        sourceName: '',
        baseNameWhite: 'stg,ods,dw',
        baseNameBlack: '',
        tableNameWhite: '',
        tableNameBlack: '%tinf\\_%,%\\_ext,%\\_test,test\\_%,%\\_temp\\_%,temp\\_%,%\\_temp,%\\_tmp\\_%,%\\_tmp,tmp\\_%,view\\_%',
        partNameWhite: '',
        partNameBlack: '',
        partValueWhite: '',
        partValueBlack: '',
        syncMode: '源标识同步',
        syncRange: 99999,
        isDefaultRule: '是'
      }
      this.title = '新增'
      this.openEdit = true
    },
    handleSelectionChange(val) {
    }
  }
}
</script>
